import React, { useEffect, useState } from 'react';
import { env } from '@/utils/data';
import { Row } from 'antd';
import { getSystemApi } from '@/request/system';
import Diamond from '@/components/diamond';
import Trapezium from '@/components/trapezium';
import NoData from '@/components/noData';
import { titleCase } from '@/utils/tools';

interface NavItem {
  systemName: string;
  gitlabName: string;
  webUrl: string;
  _id: string;
}

const DWnav = () => {
  const [curEnv, setCurEnv] = useState('dev');
  const [linkMenu, setLinkMenu] = useState([]);

  const getNav = async (e: string) => {
    try {
      const res: any = await getSystemApi({ env: e });
      setLinkMenu(res);
    } catch (err: any) {
      console.log(err.message);
    }
  };
  useEffect(() => {
    getNav(curEnv);
  }, [curEnv]);
  return (
    <div className="dw-nav dashboard-box">
      <Row>
        <Trapezium
          text="Dev"
          style={{ marginRight: '10px' }}
          actived={curEnv === 'dev'}
          onClick={() => {
            setCurEnv('dev');
          }}
        />
        {env.slice(1).map((item) => (
          <Diamond
            key={item.value}
            text={titleCase(item.label)}
            actived={curEnv === item.value}
            style={{ marginRight: '10px' }}
            onClick={() => {
              setCurEnv(item.value);
            }}
          />
        ))}
      </Row>
      <div className="nav-menu">
        {linkMenu.length ? (
          linkMenu.map((item: NavItem) => (
            <div key={item._id} onClick={() => window.open(item.webUrl)} className="system-link">
              {item.systemName || item.gitlabName}
            </div>
          ))
        ) : (
          <NoData src="/images/system-none.png" width={80} height={80} marginTop="10px" text="暂无项目" />
        )}
      </div>
    </div>
  );
};
export default DWnav;
